<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
<%
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragrma","no-cache");
response.setDateHeader("Expires",0);
%>
<title>校园失物招领系统</title>
<style type="text/css">

</style>
<script type="text/javascript" src="./js/head.js"></script>
</head>
<body>
	<div id="person" style="width: 100%;height: 100%;" oncontextmenu="return false">
		<div class="header">
			<h3>个人中心</h3>
			<img src='img/logo.png'>
		</div>
		<div class="div_border mt10 ml10 mr10 flex" id="body" v-show="pageA">
			<!-- ======================left -->
			<div id="left" style="width: 300px;border-right: 2px solid #3CB371;">
				<div style="width: 100%;height: 35%;">
					<h4 class="flex wCenter hCenter">
						<div>
							欢迎回家~<br><br><br>
							<span>{{user.userName}}</span> &nbsp&nbsp <a href="#" @click="update">修改个人信息</a>
						</div>
					</h4>
				</div>
				<div class="font" style="border-top:1px solid #dfe4ed;border-bottom:1px solid #dfe4ed;width: 100%;height: 50px; text-align: center;line-height: 50px;font-size: 18px;background-color: #409EFF;opacity: 1.0;">基础信息</div>
				<div class="li"><span class="mr10">昵称: {{user.userName}} </span></div>
				<div class="li"><span class="mr10">手机: {{user.tel}} </span> </div>
				<div class="li"><span class="mr10">邮箱: {{user.email}} </span></div>
			</div>
			<!-- ========================right -->
			<div class="p10" id="right" style="width: calc(100% - 300px)">
				<!-- <div style="border-bottom:1px dotted #dfe4ed;height: 45%;">
					<div class="hand w200">
						<i class="el-icon-caret-bottom"></i>个人信息
					</div>
				</div> -->
				<!-- ==============right_bottom -->
				<div>
					<div class="hand mt10 lan">
						<i class="el-icon-caret-bottom"></i>我的帖子
					</div>
					<div class="mt10">
						<el-table v-loading="loading" stripe :data="tableData" style="width:100%;"
				            header-align="center">
				            <el-table-column sortable align="center" type="index"></el-table-column>
				            <el-table-column sortable align="center" prop="tname" label="主题" sortable show-overflow-tooltip>
				            	<template slot-scope="scope" >
							        <el-badge value="new" class="new" v-if="scope.row.flag">
							        	<span><a href="#" @click="open(scope.row.tid)">{{ scope.row.tname }}</a></span>
							        </el-badge>
							        <el-badge value="" v-else>
							        	<span><a href="#" @click="open(scope.row.tid)">{{ scope.row.tname }}</a></span>
							        </el-badge>
							    </template>
				            </el-table-column>
				            <el-table-column sortable align="center" prop="t_create_time" :formatter="dateFormat" label="日期" sortable show-overflow-tooltip></el-table-column>
				            <el-table-column sortable align="center" prop="tstatus" :formatter="statusFormat" label="状态" sortable show-overflow-tooltip></el-table-column>
				            <el-table-column sortable align="center" label="操作">
				            	<template slot-scope="scope">
				            		<!-- <el-button size="mini" type="primary" @click="updateTopic(scope.row.tid)" size="mini">修改</el-button> -->
							        <el-button size="mini" type="primary" size="mini" v-if="scope.row.tstatus=='0'" @click="end(scope.row.tid)">完结</el-button>
							        <el-tag type="success" v-if="scope.row.tstatus=='1'">已完结</el-tag>
							        <el-button size="mini" type="danger" @click="del(scope.row.tid)" size="mini">删除</el-button>
							    </template>
				            </el-table-column>
				        </el-table>
				        <!-- 分页条 -->
				        <div class="flex wEnd">
				        	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					                :current-page="currPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
					                layout="total, sizes, prev, pager, next, jumper" :total='total' >
					        </el-pagination>
				        </div>
				        <!-- 分页条结束 -->
					</div>
				</div>
			</div>
		</div>
		<!-- ===============================================================~ -->
		<div class="div_border m10 p10" v-show="pageB">
			<div class="hand div_bottom lan">
				<i class="el-icon-caret-bottom"></i>个人详细信息
			</div>
			<div class="p10 wCenter mt10" style="width:70%;">
  				<el-form class="mt10" :model="user" :rules="rules" ref="refForm" label-position="left" label-width="100px">
					<el-form-item label="用户名" prop="userCode">
					  <el-input v-model="user.userCode" disabled placeholder="请输入用户名，长度不大于20"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
					  <el-input type="password" v-model="user.password" clearable :maxlength='15' placeholder="请输入密码，长度不大于15"></el-input>
					</el-form-item>
					<el-form-item label="重复密码" prop="rePassword">
					  <el-input type="password" v-model="user.rePassword" clearable  :maxlength='15' placeholder="请再次输入密码，长度不大于15"></el-input>
					</el-form-item>
					<el-form-item label="昵称" prop="userName">
					  <el-input v-model="user.userName" clearable :maxlength='15' placeholder="请输入昵称，长度不大于15"></el-input>
					</el-form-item>
					<el-form-item label="手机号" prop="tel">
					  <el-input v-model.number="user.tel" clearable :maxlength='11' placeholder="请输入手机号，长度不大于11"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
					  <el-input v-model="user.email" clearable :maxlength='15' placeholder="请输入合法邮箱地址，长度不大于15"></el-input>
					</el-form-item>
				</el-form>
				<div class="flex wCenter">
					<el-button type='primary' @click="submit('refForm')" size="mini">提交</el-button>
					<el-button type='primary' @click="back('refForm')" size="mini">返回</el-button>
				</div>
	  		</div>
			
		</div>
		<!-- ===========================================================发帖页面  -->
		<div v-show="pageC" class="p10">
					
			<el-form class="mt10" :model="userTopic" :rules="userTopicRules" ref="userTopicRef" label-position="left" label-width="100px">
				<div class="flex">
					<el-form-item label="主题" prop="tname">
					  <el-input v-model="userTopic.tname" clearable :maxlength='50'></el-input>
					</el-form-item>
					<el-input v-model="userTopic.tid" v-show="false"></el-input>
					<el-form-item label="所属板块" prop="pname" style="margin-left:30px;">
					  <el-input v-model="userTopic.plate.pname"  clearable disabled></el-input>
					</el-form-item>
				</div>
				<el-form-item label="内容" prop="tcontent">
				  <script type="text/plain" id="userEditorEdit" style="width:100%;" :maxlength='300'></script>
				</el-form-item>
			<el-form>
			<div class="flex wCenter mt10">
				<el-button type="primary" size="mini" @click="submit2('userTopicRef')">提交</el-button>
				<el-button type="primary" size="mini" @click="back2('userTopicRef')">返回</el-button>
			</div>
		</div>
		<el-dialog class='p10' v-model='topicData' :visible.sync='topicV' :close-on-click-modal=false width="70%" title="帖子详情">   
			<div style='border: 1px solid #dfe4ed;border-radius: 4px;padding: 10px 20px;'>
				<div class='flex wBetween'>
					<h1></h1>
					<h1>{{topicData.tname}}</h1>
					<h1></h1>
				</div>
				<div class='flex wBetween mt10'>
					<div><span>发布人: {{topicData.user.userName}}</span></div>
					<div><span>所属板块: {{topicData.plate.pname}}</span></div>
					<div><span>发布时间: {{topicData.createDate}}</span></div>
				</div>
				<div class="mt20" style="height:400px;" id="content"></div><!-- {{topicData.tcontent}} -->
				<div class="flex wEnd"><span>联系方式: {{topicData.user.tel}}</span></div>
			</div>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" src="./js/person.js"></script>
</html>